<template>
  <div v-if="userData">
    <perNav :center="'编辑资料'"></perNav>
    <div class="exit">
      <div class="photo">
        <label>
          <van-uploader v-show="false" :file-list="fileList" v-bind:after-read="afterRead" />
          <img v-if="userData.head_img" :src="$axios.defaults.baseURL +userData.head_img" alt />
          <img v-else src="../../assets/logo.png" alt />
        </label>
      </div>
    </div>
    <perExitBar
      leftText="昵称"
      iconClass="icon-youjian"
      :rightText="userData.nickname"
      @exitClick="nickNameClick"
    ></perExitBar>
    <perExitBar leftText="密码" iconClass="icon-mima" rightText="********" @exitClick="passwordClick"></perExitBar>
    <perExitBar
      leftText="性别"
      iconClass="icon-yonghu"
      :rightText="userData.gender?'男':'女'"
      @exitClick="genderClick"
    ></perExitBar>

    <van-dialog v-model="showNickname" title="昵称" show-cancel-button @confirm="confirmNickname">
      <van-cell-group>
        <van-field v-model="valueNickname" placeholder="请输入用户名" />
      </van-cell-group>
    </van-dialog>

    <van-dialog v-model="showPassword" title="密码" show-cancel-button @confirm="confirmPassword">
      <van-cell-group>
        <van-field v-model="valuePassword" placeholder="请输入密码" />
      </van-cell-group>
    </van-dialog>

    <van-dialog v-model="showGender" title="性别" show-cancel-button @confirm="confirmGender">
      <van-cell-group>
        <van-picker :columns="valueGenderArr" @change="onChangeGenderIndex" />
      </van-cell-group>
    </van-dialog>
  </div>
</template>

<script>
import perNav from "../../components/perNav";
import perExitBar from "../../components/perExitBar";
export default {
  data() {
    return {
      id: localStorage.getItem("user_id"),
      fileList: [],
      userData: [],
      showNickname: false,
      valueNickname: "",
      showPassword: false,
      valuePassword: "",
      showGender: false,
      valueGenderArr: ["女", "男"],
      valueGenderIndex: 0
    };
  },
  methods: {
    getUser() {
      this.$axios({
        method: "get",
        url: "/user/" + this.id
      }).then(res => {
        const { data } = res.data;
        this.userData = data;
      });
    },
    // 编辑单条信息函数
    exitOneMsg(data = {}) {
      this.$axios({
        method: "post",
        url: "/user_update/" + this.id,
        data: data
      }).then(res => {
        const { data } = res.data;
        this.userData = data;
      });
    },
    //头像
    afterRead(fileObj) {
      const formData = new FormData();
      formData.append("file", fileObj.file);
      this.$axios({
        method: "post",
        url: "/upload",
        data: formData
      }).then(res => {
        const { message, data } = res.data;
        if (message === "文件上传成功") {
          this.exitOneMsg({ head_img: data.url });
        }
      });
    },
    nickNameClick() {
      this.showNickname = true;
    },
    passwordClick() {
      this.showPassword = true;
    },
    genderClick() {
      this.showGender = true;
    },
    // 性别 选择器变动
    onChangeGenderIndex(picker, value, index) {
      this.valueGenderIndex = index;
    },
    confirmGender() {
      this.valueGenderIndex = this.valueGenderIndex || 0;
      this.exitOneMsg({ gender: this.valueGenderIndex });
    },
    confirmNickname() {
      this.exitOneMsg({ nickname: this.valueNickname });
    },
    confirmPassword() {
      this.exitOneMsg({ password: this.valuePassword });
    }
  },
  mounted() {
    this.getUser();
  },
  components: {
    perNav,
    perExitBar
  }
};
</script>


<style lang="less" scoped>
.photo {
  padding-top: 8.333vw;
  display: flex;
  justify-content: center;
  img {
    width: 27.778vw;
    height: 27.778vw;
  }
}
</style>